<template>
  <div class="finish_contaner">
    <div class="chart" id="chart_right1"></div>
  </div>
</template>

<script>
export default {
    name: "finishedComponent",
    data(){
        return {

        }
    },
    mounted() {
        this.getEchart();
    },
    methods: {
        getEchart(){
            const chartDom = document.getElementById('chart_right1');
            const myChart = this.$echarts.init(chartDom);
            let option;

            option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            grid: {
                top: '3%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#b3ccf8',
                        fontSize: 13
                    },
                }
            },
            yAxis: {
                type: 'category',
                axisLabel: {
                    textStyle: {
                        color: '#b3ccf8',
                        fontSize: 13
                    },
                },
                data: ['绵阳中心仓', '北海成品仓', 'M2成品仓', 'M2租赁仓', 'DPM成品仓', '外仓']
            },
            series: [
                {
                type: 'bar',
                data: this.dataSet()
                }
            ]
            };

            option && myChart.setOption(option);
            window.addEventListener('resize', () => {
                 myChart.resize()
            })
        },
        dataSet() {
            let data = [18203, 23489, 29034,63023, 104970, 131744]
            let colors = ['rgba(14,109,236', 'rgba(255,91,6', 'rgba(100,255,249', 'rgba(248,195,248', 'rgba(110,234,19', 'rgba(255,168,17', 'rgba(218,111,227'];
            data = data.map((item,index) => {
                let color = colors[index]
                return {
                    value: item,
                    itemStyle: {
                        color: {
                            type: 'radial',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: color + ', 0.3)'  // 0% 处的颜色
                            }, {
                                offset: 1, color: color + ', 1)' // 100% 处的颜色
                            }],
                            global: true // 缺省为 false
                        }
                    }
                }
            })
            return data
        }
    }
}
</script>

<style lang="scss" scoped>
    .finish_contaner {
        .chart {
            height: 4rem;
            width: 100%;
        }
    }
</style>